<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Gradient Color Effect | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
}
//.center{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.outer{
  position: relative;
  margin: 0 50px;
  background: #111;
}
//.button{
  height: 70px;
  width: 220px;
  border-radius: 50px;
}
.circle{
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
.outer button, .outer span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.outer button{
  background: #111;
  color: #f2f2f2;
  outline: none;
  border: none;
  font-size: 20px;
  z-index: 9;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
//.button button{
  height: 60px;
  width: 210px;
  border-radius: 50px;
}
.circle button{
  height: 180px;
  width: 180px;
  border-radius: 50%;
}
.outer span{
  height: 100%;
  width: 100%;
  background: inherit;
}
.button span{
  border-radius: 50px;
}
.circle span{
  border-radius: 50%;
}
.outer:hover span:nth-child(1){
  filter: blur(7px);
}
.outer:hover span:nth-child(2){
  filter: blur(14px);
}
.outer:hover{
  background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
  animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
  0%{
    filter: hue-rotate(0deg);
  }
  100%{
    filter: hue-rotate(360deg);
  }
}
@media (max-width: 640px){
  .center{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .outer{
    margin: 50px 0;
  }
}
.btn {
  background-color: DodgerBlue; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 12px 16px; /* Some padding */
  font-size: 16px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}
@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
body{
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background:white;
}
span{
  position: relative;
  display: inline-flex;
  width: 180px;
  height: 55px;
  margin: 0 15px;
  perspective: 1000px;
}
span a{
  font-size: 19px;
  letter-spacing: 1px;
  transform-style: preserve-3d;
  transform: translateZ(-25px);
  transition: transform .25s;
  font-family: 'Montserrat', sans-serif;
}
span a:before,
span a:after{
  position: absolute;
  content: "BUTTON";
  height: 55px;
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid black;
  box-sizing: border-box;
}
span:nth-child(1) a:before{
  color: #fff;
  background: #000;
  transform: rotateY(0deg) translateZ(25px);
}
span:nth-child(1) a:after{
  color: #000;
  transform: rotateX(90deg) translateZ(25px);
}
span:nth-child(2) a:before{
  color: #fff;
  background: black;
  transform: rotateX(-90deg) translateZ(25px);
}
span:nth-child(2) a:after{
  color: #000;
  transform: rotateY(0deg) translateZ(25px);
}
span:nth-child(1) a:hover{
  transform: translateZ(-25px) rotateX(-90deg);
}
span:nth-child(2) a:hover{
  transform: translateZ(-25px) rotateX(90deg);
}
.button4{
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}

.button4 {border-radius: 2px;}
 .button5 {
        background-color: #1c87c9;
        -webkit-border-radius: 60px;
        border-radius: 60px;
        border: none;
        color: #eeeeee;
        cursor: pointer;
        display: inline-block;
        font-family: sans-serif;
        font-size: 20px;
        padding: 5px 15px;
        text-align: center;
        text-decoration: none;
      }
      @keyframes glowing {
        0% {
          background-color: #2ba805;
          box-shadow: 0 0 5px #2ba805;
        }
        50% {
          background-color: #49e819;
          box-shadow: 0 0 20px #49e819;
        }
        100% {
          background-color: #2ba805;
          box-shadow: 0 0 5px #2ba805;
        }
      }
      .button5 {
        animation: glowing 1300ms infinite;
      }
</style>
<title>ANIMATED BUTTONS</title>
   </head>
   <body><p></p>
         <div class="outer circle">
<button>"BUTTON 1"</button>
            <span></span>
            <span></span>
         </div><br>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button>"BUTTON 2"</button>
<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Trash</button>
<button class="btn"><i class="fa fa-close"></i> Close</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>
      </div><br>
<button>"BUTTON 3"</button>
<span><a href="#"> </a></span>
<button class="button4">"BUTTON 4"</button>
 <a class="button5" href="#">"BUTTON 5"</a>
   </body>
</html>
